<template>
  <div class="drag-tree-item">
    <div  v-if="!treeItemData.children && treeItemData.schemaId === 1">{{ treeItemData.schemaName }} </div>
    <div  v-if="treeItemData.children">
      <draggable
          tag="ul"
          v-model="treeItemData.children"
          v-bind="{
          animation: 200,
          group: treeItemData.children,
          disabled: false,
          ghostClass: 'ghost'
        }"
      >
      <div v-for="v in treeItemData.children" :key="`${v.schemaId}`">
          <div :style="{'padding-left': (v.schemaLevel-2)*20+16+'px'}" class="cursor-pointer children-item"
               v-show="!v.showBtn"
               :class="v.schemaId === value && 'children-active'" @click="selDevice(v)">
            <q-btn :class="{'invisible': !v.children.length }"
                   dense round flat size="sm"
                   @click.stop="showBtn(v)"
                   :icon="!v.hasBtn ? 'iconfont icontubiao-40' : 'iconfont icontubiao-43'" />
            {{v.schemaName}}</div>
          <drag-tree-item :treeData="v" v-if="v.children"  @onSelDevice="selDevice" :value="value"/>
      </div>
      </draggable>
    </div>
  </div>
</template>
<script>

import Draggable from 'vuedraggable'
export default {
  name: 'drag-tree-item',
  computed: {
  },
  components: { Draggable },
  props: {
    treeData: Object,
    value: String
  },
  data () {
    return {
      treeItemData: this.treeData
    }
  },
  mounted () {
    this.treeItemData = this.treeData
  },
  methods: {
    selDevice (val) {
      this.$emit('onSelDevice', val)
    },
    showBtn (val) {
      console.log(val)
      // val.hasBtn = !val.hasBtn
      this.$set(val, 'hasBtn', !val.hasBtn)
      this.addPropertyToChildrenRecursively(val, val.hasBtn)
    },
    addPropertyToChildrenRecursively (node, value) {
      if (!node.children || node.children.length === 0) {
        return // 如果节点没有子节点，则停止递归
      }
      for (let i = 0; i < node.children.length; i++) {
        const childNode = node.children[i]
        this.$set(childNode, 'hasBtn', value)
        this.$set(childNode, 'showBtn', value)// 添加属性到子节点
        this.addPropertyToChildrenRecursively(childNode, value) // 递归处理子节点的子节点
      }
    }
  }
}
</script>
<style lang="scss">
 .drag-tree-item{
   .children-item{
     height: 30px;
     line-height: 30px;
     width: 100%;
     overflow: hidden; //超出的文本隐藏
     text-overflow: ellipsis; //溢出用省略号显示
     white-space: nowrap; //溢出不换行
   }
   .children-active{
     border: 1px solid #eee;
     background: #F2F2F2;
   }
 }
</style>
